// 卡片从左到右滑入, name 为 paper
.paper-enter-active {
  transition: transform 0.8s, opacity 0.8s, box-shadow 0.8s, filter 0.8s;
}
.paper-leave-active {
  transition: transform 0.8s, opacity 0.8s, box-shadow 0.8s, filter 0.8s;
}
.paper-enter-from {
  transform: rotate(-10deg) scale(0.5) translateX(-100%);
  opacity: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  filter: blur(2px);
}
.paper-leave-to {
  transform: rotate(10deg) scale(0.5) translateX(100%);
  opacity: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  filter: blur(2px);
}
.paper-enter-to,
.paper-leave-from {
  transform: rotate(0) scale(1) translateX(0);
  opacity: 1;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  filter: blur(0);
}


// 卡片从右到左滑入, name 为 slide
// .slide-enter-active,
// .slide-leave-active {
//   transition: transform 0.8s;
// }
// .slide-enter-from,
// .slide-leave-to {
//   transform: translateX(100%);
// }
// .slide-enter-to,
// .slide-leave-from {
//   transform: translateX(0);
// }

// 中间向外贴纸 name 为 sticker
.sticker-enter-active {
  transition: transform 0.8s, opacity 0.8s;
}
.sticker-leave-active {
  transition: transform 0.8s, opacity 0.8s;
}
.sticker-enter-from {
  transform: scale(0.5);
  opacity: 0;
}
.sticker-leave-to {
  transform: scale(1.5);
  opacity: 0;
}
.sticker-enter-to, .sticker-leave-from {
  transform: scale(1);
  opacity: 1;
}

// 方块从左到右滑入, 会抽搐一下, name 为 square
// .square-enter-active {
//   transition: all 0.8s;
// }
// .square-leave-active {
//   transition: all 0.8s;
// }
// .square-enter-from {
//   transform: translate(-50%, -50%) scale(0);
//   opacity: 0;
// }
// .square-leave-to {
//   transform: translate(-50%, -50%) scale(0);
//   opacity: 0;
// }
// .square-enter-to, .square-leave-from {
//   transform: translate(-50%, -50%) scale(1);
//   opacity: 1;
// }

// 铁山靠版本
// .square-enter-active {
//   transition: all 0.8s;
// }
// .square-leave-active {
//   transition: all 0.8s;
// }
// .square-enter-from {
//   transform: translate(-50%, -50%) scale(0) rotateY(-180deg);
//   opacity: 0;
// }
// .square-leave-to {
//   transform: translate(-50%, -50%) scale(0) rotateY(180deg);
//   opacity: 0;
// }
// .square-enter-to, .square-leave-from {
//   transform: translate(-50%, -50%) scale(1) rotateY(0deg);
//   opacity: 1;
// }

// 翻转效果, name 为 fold
// .fold-enter-active {
//   transition: all 0.8s;
// }
// .fold-leave-active {
//   transition: all 0.8s;
// }
// .fold-enter-from {
//   transform: perspective(1200px) rotateY(-180deg);
//   opacity: 0;
// }
// .fold-leave-to {
//   transform: perspective(1200px) rotateY(180deg);
//   opacity: 0;
// }
// .fold-enter-to, .fold-leave-from {
//   transform: perspective(1200px) rotateY(0deg);
//   opacity: 1;
//   animation: fold-enter 0.8s ease-in;
// }

// @keyframes fold-enter {
//   0% {
//     transform: perspective(1200px) rotateY(-180deg);
//     opacity: 0;
//   }
//   100% {
//     transform: perspective(1200px) rotateY(0deg);
//     opacity: 1;
//   }
// }

// 页面从上往下展开, name 为 fold
// .fold-enter-active {
//   transition: all 0.8s;
// }
// .fold-leave-active {
//   transition: all 0.8s;
// }
// .fold-enter-from {
//   transform: rotateX(-180deg);
//   transform-origin: top;
//   opacity: 0;
// }
// .fold-leave-to {
//   transform: rotateX(0deg);
//   transform-origin: top;
//   opacity: 0;
// }
// .fold-enter-to, .fold-leave-from {
//   transform: rotateX(0deg);
//   transform-origin: top;
//   opacity: 1;
// }

// 页面从上往下展开, 折痕明显, name 为 fold
// .fold-enter-active {
//   transition: all 0.8s;
// }
// .fold-leave-active {
//   transition: all 0.8s;
// }
// .fold-enter-from {
//   transform: perspective(1200px) rotateX(-180deg) translateY(-2px);
//   transform-origin: top;
//   opacity: 0;
// }
// .fold-leave-to {
//   transform: perspective(1200px) rotateX(0deg) translateY(0);
//   transform-origin: top;
//   opacity: 0;
// }
// .fold-enter-to, .fold-leave-from {
//   transform: perspective(1200px) rotateX(0deg) translateY(0);
//   transform-origin: top;
//   opacity: 1;
// }


// 页面从左往右展开, name 为 fold
// .fold-enter-active {
//   transition: all 0.8s;
// }
// .fold-leave-active {
//   transition: all 0.8s;
// }
// .fold-enter-from {
//   transform: perspective(1200px) rotateY(-90deg) translateX(-100%);
//   transform-origin: left;
//   opacity: 0;
// }
// .fold-leave-to {
//   transform: perspective(1200px) rotateY(0) translateX(0);
//   transform-origin: left;
//   opacity: 0;
// }
// .fold-enter-to, .fold-leave-from {
//   transform: perspective(1200px) rotateY(0) translateX(0);
//   transform-origin: left;
//   opacity: 1;
// }







